﻿@page "/checkboxlists"
@inject IStringLocalizer<CheckboxLists> LLocalizer

<h3>@LLocalizer["Title"]</h3>

<h4>@LLocalizer["H1"]</h4>

<Block Title="@LLocalizer["Blok1Title"]" Introduction="@LLocalizer["Block1Intro"]">
    <p></p>
    <ul class="ul-demo">
        <li>@((MarkupString)LLocalizer["Li1"].Value)</li>
        <li>@((MarkupString)LLocalizer["Li2"].Value)</li>
        <li>@((MarkupString)LLocalizer["Li3"].Value)</li>
    </ul>
    <CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]"
                  OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
    <BlockLogger class="mt-3" @ref="Trace" />
</Block>

<Block Title="@LLocalizer["Block2Title"]" Introduction="@LLocalizer["Block2Intro"]">
    <p>@((MarkupString)LLocalizer["P2"].Value)</p>
    <p>@((MarkupString)LLocalizer["P3"].Value)</p>
    <p>@((MarkupString)LLocalizer["P4"].Value)</p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3">
            <div class="col-12">
                <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
            </div>
            <div class="col-12">
                <label class="form-label">@Localizer["Foo.BindValue"]</label>
                <div class="form-control flex-fill">@Dummy.Name</div>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="@LLocalizer["Block3Title"]" Introduction="@LLocalizer["Block3Intro"]">
    <p>@((MarkupString)LLocalizer["P5"].Value)</p>
    <div class="row g-3">
        <div class="col-12">
            <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
        </div>
        <div class="col-12">
            <label class="form-label">@Localizer["Foo.BindValue"]</label>
            <div class="form-control">@(string.Join(",", Value2))</div>
        </div>
    </div>
    <p class="mt-3">@((MarkupString)LLocalizer["P6"].Value)</p>
    <div class="row g-3">
        <div class="col-12">
            <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
        </div>
        <div class="col-12">
            <label class="form-label">@Localizer["Foo.BindValue"]</label>
            <div class="form-control flex-fill">@(string.Join(",", Value3))</div>
        </div>
    </div>
</Block>

<Block Title="@LLocalizer["Block4Title"]" Introduction="@LLocalizer["Block4Intro"]">
    <p>@((MarkupString)LLocalizer["P7"].Value)</p>
    <div class="row g-3">
        <div class="col-12">
            <CheckboxList @bind-Value="@SelectedEnumValues" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
        </div>
        <div class="col-12">
            <label class="form-label">@Localizer["Foo.BindValue"]</label>
            <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
        </div>
    </div>
</Block>

<Block Title="@LLocalizer["Block5Title"]" Introduction="@LLocalizer["Block5Intro"]">
    <p>@LLocalizer["P8"]</p>
    <ValidateForm Model="@Dummy">
        <CheckboxList @bind-Value="@Dummy.Name" ShowBorder="false" Items="@Items2" />
    </ValidateForm>
</Block>

<Block Title="@LLocalizer["Block6Title"]" Introduction="@LLocalizer["Block6Intro"]">
    <CheckboxList @bind-Value="@Dummy1.Name" IsVertical="true" ShowBorder="false" Items="@Items5" />
</Block>

<Block Title="@LLocalizer["Block7Title"]" Introduction="@LLocalizer["Block7Intro"]">
    <CheckboxList @bind-Value="@Dummy2.Name" IsDisabled="true" ShowBorder="false" Items="@Items6" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
